<template>
  <div class="container">
    <!-- 筛选器 -->
    <el-card>
      <el-form :model="params" label-width="80px">
        <el-form-item label="聘用形式: ">
          <el-checkbox-group v-model="params.approvalsTypeChecks">
            <el-checkbox label="1">正式</el-checkbox>
            <el-checkbox label="2">非正式</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="员工状态: ">
          <el-checkbox-group v-model="params.approvalsStateChecks">
            <el-checkbox label="1">在职</el-checkbox>
            <el-checkbox label="2">离职</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="部门: ">
          <el-checkbox-group v-model="params.departmentChecks">
            <el-checkbox
              v-for="department in departmentList"
              :key="department.id"
              :label="department.id"
            >
              {{ department.name }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 表格部分 -->
    <el-card class="table-wrapper">
      <el-table
        :data="salaryList.rows"
      >
        <el-table-column
          prop="index"
          label="序号"
          width="50"
        />
        <el-table-column
          prop="username"
          label="姓名"
          width="180"
        />
        <el-table-column
          prop="mobile"
          label="手机"
          width="180"
        />
        <el-table-column
          prop="workNumber"
          label="工号"
          width="180"
        />
        <el-table-column
          prop="formOfEmployment"
          label="聘用形式"
          width="180"
        />
        <el-table-column
          prop="departmentName"
          label="部门"
          width="180"
        />
        <el-table-column
          prop="timeOfEntry"
          label="入职时间"
          width="180"
        />
        <el-table-column
          prop="currentBasicSalary"
          label="工资基数"
          width="180"
        />
        <el-table-column
          prop="inServiceStatus"
          label="津贴方案"
          width="180"
        />
        <el-table-column
          label="操作"
          width="150">
          <template slot-scope="scope">
            <!-- scope.row: 当前行的数据 -->
            {{ scope.row.username }}
            <!-- <el-button size="small">查看</el-button>
            <el-button type="text" size="small">编辑</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  name: 'Salary',
  data() {
    return {
      params: {
        // 选中的聘用形式
        approvalsTypeChecks: [],
        // 选中的员工状态
        approvalsStateChecks: [],
        // 选中的部门
        departmentChecks: []
      },
      currentPage: 1
    }
  },
  watch: {
    params: {
      deep: true,
      handler(newValue) {
        console.log(newValue)
      }
    }
  },
  computed: {
    ...mapState('department', [
      'departmentList'
    ]),
    ...mapState('salary', [
      'salaryList'
    ])
  },
  methods: {
    ...mapActions('department', [
      'updateDepartmentList'
    ]),
    ...mapActions('salary', [
      'updateSalaryList'
    ])
  },
  created() {
    this.updateDepartmentList()
    this.updateSalaryList({
      ...this.params,
      page: this.currentPage
    })
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 16px;

  .table-wrapper {
    margin-top: 16px;
  }
}
</style>
